<template>
  <div class="car-control">
    <transition name="move">
      <div class="car-left" @click.stop.prevent="dimCount()" v-show="food.count>0">
        <span class="inner icon-remove_circle_outline"></span>
      </div>
    </transition>

    <div class="car-count" v-show="food.count>0">{{food.count}}</div>
    <div class="car-right icon-add_circle" @click.stop.prevent="addCount()"></div>
  </div>
</template>

<script type="text/ecmascript-6">
  import Vue from 'vue'
  export default{

      props:{
          food:{
              type:Object
          }
      },

    methods:{
      addCount(){
        if(!this.food.count){
//            this.food.count=1
          Vue.set(this.food,'count',1)
        }else{
            this.food.count++
        }

      },
      dimCount(){
        if(this.food.count>0){
          this.food.count--
        }
      }
    }
  }
</script>

<style lang="scss">
.car-control{
    font-size:0px;

  .car-left{
    display: inline-block;
    padding:6px;
    .inner{
      display: inline-block;
      font-size: 24px;
      line-height: 24px;
      color: rgb(0,160,220);
      transition: all .3s linear;

    }
    &.move-enter-active, &.move-leave-active{
       transition: all .5s linear;
     }
    &.move-enter, &.move-leave-to{
       opacity: 0;
       transform: translate3D(24px,0,0);
        .inner{
          transform: rotate(180deg);
        }
     }
  }
  .car-count{
    display: inline-block;
    font-size: 10px;
    line-height: 24px;
    padding-top: 6px;
    text-align: center;
    vertical-align: top;
    width: 12px;
    color: rgb(147,153,159);

  }
  .car-right{
    padding:6px;
    display: inline-block;
    font-size: 24px;
    line-height: 24px;
    color: rgb(0,160,220);

  }
}
</style>
